import type { FC } from 'react'
import { photoSize } from '../utils'

const Index: FC<PhotoObj & { style?: React.CSSProperties }> = (props) => {
  const { photo, showPhoto, shape = 'portrait', style, size = 'L' } = props
  if (!showPhoto || !photo)
    return null
  if (!shape || shape === 'portrait') {
    return <div style={ { width: `${photoSize[size]}px`, height: `${photoSize[size] * 4 / 3}px`, overflow: 'hidden', margin: '0 auto', ...style }}>
      <img src={photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
    </div>
  }
  else if (shape === 'round') {
    return (<div style={{ width: `${photoSize[size]}px`, height: `${photoSize[size]}px`, borderRadius: '50%', overflow: 'hidden', margin: '0 auto', ...style }}>
      <img src={photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
    </div>)
  }
  else if (shape === 'square') {
    return (<div style={{ width: `${photoSize[size]}px`, height: `${photoSize[size]}px`, overflow: 'hidden', margin: '0 auto', ...style }}>
      <img src={photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
    </div>)
  }
}

export default Index
